<template>
    <div class="inner-warp">
        <MainTitleVue title="期刊/会议主页" />
        <div class="sub-warp">
            <!-- 类型栏 -->
            <div class="type-bar">
                <n-button
                    round
                    size="small"
                    color="#825CF7"
                    ghost
                    class="share-button"
                    @click="copyLink"
                    :data-clipboard-text="shareLink"
                >
                    <template #icon>
                        <n-icon>
                            <share-icon />
                        </n-icon>
                    </template>
                    分享
                </n-button>
                <n-button
                    round
                    size="small"
                    color="#FFBB1C"
                    :ghost="!journal_data.is_collected"
                    class="collect-button"
                    @click="starJournal"
                >
                    <template #icon>
                        <n-icon>
                            <focus-icon />
                        </n-icon>
                    </template>
                    {{ journal_data.is_collected ? "已关注" : "关注" }}
                </n-button>
            </div>
            <n-divider style="width: 0;" />
            <!-- 标题 -->
            <div>
                <n-h1>{{ journal_data.name }}</n-h1>
            </div>
            <n-divider />
            <div class="Echarts">
                <n-card class="Echarts_card">
                    <AnnualPaperChart />
                </n-card>
            </div>
            <div class="Echarts">
                <n-card class="Echarts_card">
                    <CitationPerIssue />
                </n-card>
            </div>
            <div class="result-count">
                <div></div>
                <n-text italic>{{ countFormat(result_count) }}</n-text>
                <n-text>&nbsp;学术成果</n-text>
            </div>
            <!-- 排序方式切换 -->
            <div class="rank-type">
                <n-switch @update:value="changeRankType" v-model:value="rank_type">
                    <template #checked>最新发表</template>
                    <template #unchecked>最多被引</template>
                </n-switch>
            </div>
            <PaperList
                :page="page"
                :page_size="page_size"
                :papers="papers"
                :result_count="result_count"
                @update-page="updagePage"
                @update-page-size="updagePageSize"
            />
        </div>
    </div>
</template>

<script setup lang='ts'>
import MainTitleVue from "@/components/common/MainTitle.vue";
import { ref } from '@vue/reactivity';
import { useMessage } from 'naive-ui';
import { ShareSocialOutline as ShareIcon } from '@vicons/ionicons5'
import { AutoAwesomeOutlined as FocusIcon } from '@vicons/material'
import Clipboard from 'clipboard'
import PaperList from '@/components/search/PaperList.vue';
import AnnualPaperChart from '@/views/entity/components/AnnualPaperChart.vue';
import CitationPerIssue from '@/views/entity/components/CitationPerIssue.vue';
import { getCurrentInstance, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 引入消息函数
const message = useMessage()

// api访问代理
const { proxy } = getCurrentInstance() as any

// 引入路由
const router = useRouter()

const result_count = ref(15)

//获取期刊/会议id
const id = router.currentRoute.value.params.id

const shareLink = "http://121.36.93.104/journal/" + router.currentRoute.value.params.id

// 初始页数和每页展示数
const page = ref(1)
const page_size = ref(10)

// 排序方式
const rank_type = ref(false)

// 期刊/会议信息
let journal_data = ref({
    name: "IEEE",
    //   已收藏
    is_collected: false,
    //   被引用数
    cited_time: 114514
});

let papers = ref([{
    id: 1,
    title: "Hop Language: A Language Learning App Empowered by Deep Learning",
    venue: {
        id: 0,
        name: 'IEEE'
    },
    year: 2020,
    abstract: 'With the amazing advancement of mobile technology, people can easily learn a new language from their mobile devices. Exploring popular language learning apps, we discovered that speech and handwriting recognition functionalities are lacking in these.',
    quote_time: 10,
    download_time: 5,
    author: [
        {
            id: 1,
            name: "Maisa Hamdan",
        },
        {
            id: 2,
            name: "Margaret Blackmon",
        }
    ],
}])

onMounted(() => {
    init()
})

const init = (() => {
    getJournalDetail()
    getJournalPapers()
})

// 获取期刊/会议信息
const getJournalDetail = (() => {
    proxy.$api.entity.getJournalDetail({ id: id }).then((result: any) => {
        if (result.success) {
            journal_data.value = result.journal_data
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

// 获取期刊/会议论文
const getJournalPapers = (() => {
    var params = {
        id: id,
        rank_type: rank_type.value ? 1 : 2,
        page: page.value,
        page_size: page_size.value
    }
    proxy.$api.entity.getJournalPapers(params).then((result: any) => {
        if (result.success) {
            result_count.value = result.result_count
            papers.value = result.papers
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

// 更改排序方式
const changeRankType = ((value: boolean) => {
    rank_type.value = value
    getJournalPapers()
})

// 更新页码
const updagePage = ((value: number) => {
    page.value = value
    getJournalPapers()
})

// 更新页条目数
const updagePageSize = ((value: number) => {
    page.value = 1
    page_size.value = value
    getJournalPapers()
})

// 收藏/取消收藏
const starJournal = (() => {
    proxy.$api.user.starJournal({ id: id }).then((result: any) => {
        if (result.success) {
            if (journal_data.value.is_collected) {
                message.success("取消关注成功")
            } else {
                message.success("关注成功")
            }
            journal_data.value.is_collected = !journal_data.value.is_collected
        } else {
            message.warning(result.msg)
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

const countFormat = ((_num: number) => {
    var num = (_num || 0).toString()
    var result = '';
    while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
    }
    if (num) { result = num + result; }
    return result;
})

// 复制链接
const copyLink = (() => {
    let clipboard = new Clipboard('.share-button')
    clipboard.on('success', () => {
        message.success("已复制分享地址")
        clipboard.destroy()
    })
    clipboard.on('error', () => {
        message.error("复制地址失败，请重试")
        clipboard.destroy()
    })
})
</script>

<style scoped>
.inner-warp {
    margin: 50px auto;
    height: 100%;
    width: 1100px;
}

.sub-warp {
    margin: 3% 13%;
}

.type-bar {
    font-weight: bold;
}

.type-bar :deep(.n-button) {
    float: right;
    margin-right: 10px;
}

.Echarts {
    margin-top: 10px;
    display: flex;
    font-size: 60px;
    font-weight: bold;
}

.Echarts_card {
    height: 500px;
    width: 98%;
    margin-right: 1%;
    margin-left: 1%;
    box-shadow: 0 8px 8px hsl(0deg 0% 78% / 50%);
}

.rank-type {
    float: right;
}

.rank-type :deep(.n-switch) {
    margin-left: 20px;
    --rail-color: #333333 !important;
    --rail-color-active: #40acbb !important;
}

.result-count {
    margin-top: 10px;
    display: flex;
}

.result-count :deep(div) {
    background: #ebc34a;
    height: 20px;
    width: 4px;
    margin-right: 5px;
}
</style>